<!-- 玩家账号 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @download="getExport" @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" placeholder="请选择">
          <el-option v-for="item in data.conditionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="width200" v-model="data.query.search_value" placeholder="请输入" clearable
          onKeyUp="value=value.replace(/[\W]/g,'')" />
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth150" v-model="data.query.time_type" placeholder="请选择">
          <el-option label="创建时间" :value="1" />
          <el-option label="最后登录时间" :value="2" />
        </el-select>
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable />
      </el-form-item>
      <el-form-item label="在线状态：">
        <el-select v-model="data.query.is_online" placeholder="请选择" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in ONLINESTATE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </template>
    <template #button>
      <!-- <div class="statistic flexDetween">
        <div class="flex">
          <p>今日活跃商户：<span>{{ data.totalForm.today_agent_active_num }}</span></p>
          <p>今日投注用户：<span>{{ data.totalForm.today_user_active_num }}</span></p>
          <p>今日活跃游戏：<span>{{ data.totalForm.today_game_active_num }}</span></p>
          <p>今日新增用户：<span>{{ data.totalForm.today_reg_count }}</span></p>
          <p>今日游戏总登录人数：<span>{{ data.totalForm.today_login_num }}</span></p>
          <el-tooltip effect="dark" placement="top" content="刷新今日汇总数据">
            <el-button round size="small" type="success" :icon="Refresh" @click="getSearchCollect(true)" />
          </el-tooltip>
        </div>
        <div class="flex">
          <el-button type="warning" @click="data.isBanListShow = true">玩家封禁列表</el-button>
        </div>
      </div> -->
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{item.tips}}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'account3d_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account3d_id, 1)">
              {{ scope.row.account3d_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account3d'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row.account3d,3),data.checkedItem = scope.row">
              {{ scope.row.account3d }}
            </span>
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'today_bet'" #default="scope">
            <span class="colorText"> {{ BigWan(scope.row.today_bet) }} </span>
          </template>
          <template v-if="item.prop == 'total_bet'" #default="scope">
            <span class="colorText"> {{ BigWan(scope.row.total_bet) }} </span>
          </template>
          <template v-if="item.prop == 'today_game_income'" #default="scope">
            <span :class="colorClass(scope.row.total_game_income)"> {{ BigWan(scope.row.today_game_income) }} </span>
          </template>
          <template v-if="item.prop == 'total_game_income'" #default="scope">
            <span :class="colorClass(scope.row.total_game_income)"> {{ BigWan(scope.row.total_game_income) }} </span>
          </template>
          <template v-if="item.prop == 'amount'" #default="scope">
            <span class="colorText"> {{ BigWan(scope.row.amount) }} </span>
          </template>
          <template v-if="item.prop == 'is_online'" #default="scope">
            <el-tag :type="scope.row.is_online ? 'success' : 'danger'">{{
              selectToLabel(ONLINESTATE, scope.row.is_online)
            }}</el-tag>
          </template>
          <template v-if="item.prop == 'created_at_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.created_at_stamp) }}
          </template>
          <template v-if="item.prop == 'last_login_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.last_login_stamp) }}
          </template>
          <template v-if="item.prop == 'last_play_game_id'" #default="scope">
            <span v-if="scope.row.last_play_game_id">
              {{ selectToLabel(indexStore.gameArray, scope.row.last_play_game_id) }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </template>
      <!-- <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button type="success" :disabled="scope.row.ban_type == 2 ? false : true" v-permiss="'/system/destroyManager'"
            size="small" @click="addEditItem(scope.row, 'unseal')">
            解封
          </el-button>
          <el-button type="danger" :disabled="scope.row.ban_type == 2 ? true : false" v-permiss="'/system/destroyManager'"
            size="small" @click="addEditItem(scope.row, 'ban')">
            封禁
          </el-button>
        </template>
      </el-table-column> -->
    </template>
  </SearchTable>
  <!-- 封禁/解封 -->
  <el-dialog v-model="data.isBanShow" title="封禁/解封" :close-on-click-modal="false" :close-on-press-escape="false"
    top="32vh" @close="onHideDetails">
    <p class="box-title">
      【{{ data.checkedItem.account3d_id }}】 {{ data.checkedItem.account3d }}
    </p>
    <form-item title="封禁/解封理由" :pass="true" value="reason">
      <el-input class="margin10 width320" type="textarea" row="4" v-model="data.reasonBan" placeholder="请输入封禁/解封理由"
        clearable />
    </form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button :disabled="!data.reasonBan" icon="CircleCheck" type="primary" size="small" @click="banPlayer">确 认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 变更表头弹框 -->
  <TableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData" />

  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
  <!-- 玩家封禁列表 -->
  <BanPlayer :show="data.isBanListShow" @onHideDetails="onHideDetails" />
</template>

<script lang="ts" setup>
defineOptions({
  name: "playerAccount"
})
defineComponent({
  name: 'playerAccount'
})
import { reactive, onMounted, ref,onActivated, onDeactivated, defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPlayer, playerBan, getPlayerCollect } from '@/api/player'
import TableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'

import UserDetails from '@/views/player/components/user-details.vue'
import BanPlayer from '@/views/player/components/banPlayer-details.vue'
import FormItem from '@/components/FormItem/FormItem.vue'
import { ONLINESTATE } from '@/config/eunm'

import { exportToExcel } from '@/utils/export'
import { selectToLabel, throttle, colorClass } from '@/utils/index'
import { setTimestampTime, setTimeValue, getSevenWeek } from '@/utils/time'
import { BigWan } from '@/utils/math'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    status: -1,
    search_type: 1,
    search_value: '',
    username: '',
    time_type: 2,
    ban_type: -1,
    agent_id: -1,
    operated_id: -1,
    is_online: -1,
    date: getSevenWeek()
  },
  conditionList: [
    { label: '平台ID', value: 1 },
    { label: '平台昵称', value: 3 }
  ],
  accountTypeList: [
    { label: '全部', value: -1 },
    { label: '普通', value: 2 },
    { label: '游客', value: 1 }
  ],
  banList: [
    { label: '全部', value: -1 },
    { label: '正常用户', value: 1 },
    { label: '封禁登录', value: 2 }
  ],
  list: [],
  total: 0,
  fields: [
    { label: '创建时间', prop: 'created_at_stamp', width: '170', visible: true, tips: '玩家的注册时间' },
    { label: '最后登录时间', prop: 'last_login_stamp', width: '170', visible: true, tips: '玩家最近一次上线的时间' },
    { label: '状态', prop: 'is_online', width: '100', visible: true, tips: '玩家在线/离线状态' },
    { label: '平台ID', prop: 'account3d_id', width: '150', visible: true, tips: '玩家ID编号，唯一' },
    { label: '平台昵称', prop: 'account3d', width: '200', visible: true, tips: '玩家名称' },
    { label: '商户昵称', prop: 'agent_id', width: '150', visible: true, tips: '玩家所属商户' },
    { label: '今日下注', prop: 'today_bet', width: '180', visible: true, sortable: true , tips: '玩家今日的下注数量'},
    { label: '历史下注', prop: 'total_bet', width: '180', visible: true, sortable: true, tips: '玩家的历史总下注数量' },
    { label: '今日输赢', prop: 'today_game_income', width: '180', visible: true, sortable: true, tips: '玩家今日输赢情况，正为玩家赢，负则反之' },
    { label: '历史输赢', prop: 'total_game_income', width: '180', visible: true, sortable: true, tips: '玩家的历史输赢情况，正为玩家赢，负为输' },
    { label: '余额', prop: 'amount', width: '180', visible: true, sortable: true, tips: '玩家当前持有余额数量' },
    { label: '今日登录次数', prop: 'today_login_num', width: '130', visible: true, tips: '当天玩家进入平台游戏的次数' },
    { label: '总登录次数', prop: 'total_login_num', width: '140', visible: true, sortable: true, tips: '玩家历史进入平台游戏的次数' },
    // { label: '最后游戏', prop: 'last_play_game_id', width: '150', visible: true },
    // { label: '最后退出时间', prop: 'last_out_login_stamp', width: '180', visible: true }
  ],
  totalForm: {
    today_agent_active_num: 0,
    today_user_active_num: 0,
    today_game_active_num: 0,
    today_reg_count: 0,
    today_login_num: 0
  },
  reasonBan: '',
  banType: 1,
  dialogVisible: false,
  isUserDetails: false,
  exportLoading: false,
  isBanShow: false,
  isBanListShow: false,
  checkedItem: {
    account3d_id: 0,
    account3d: ''
  }
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onActivated(() => {
  console.log('count.value')
})
onDeactivated(() => {
  console.log('count.value')
})
onMounted(async () => {
  getSearchList()
  // getSearchCollect(false)
})

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  indexStore.setPageLoading(true)
  let res = await getPlayer(data.query)
  indexStore.setPageLoading(false)
  res.data.list?.forEach((item: any) => {
    item.uid = item.id
  })
  data.list = res.data.list
  data.total = res.data.total
}

const getSearchCollect = throttle(async (status: boolean) => {
  let res = await getPlayerCollect({})
  data.totalForm = res.data
  if (status) {
    ElMessage.success('刷新成功')
  }
}, 3000)

// 查看玩家信息
const checkUser = async (val: any, type: number) => {
  if (type == 1) {
    data.query.search_type = type
    data.query.search_value = val
    getSearchList()
  } else {
    data.isUserDetails = true
  }
}

// 封禁/解封
const addEditItem = (row: any, type: string) => {
  data.checkedItem = row
  data.reasonBan = ''
  if (type == 'ban') {
    data.banType = 2
  } else {
    data.banType = 1
  }
  data.isBanShow = true
}
const banPlayer = async () => {
  let res = await playerBan({
    user_id: data.checkedItem.account3d_id,
    ban_type: data.banType,
    reason: data.reasonBan
  })
  ElMessage.success('封禁成功')
  onHideDetails(true)
}

// 导出
const getExport = async () => {
  let query = JSON.parse(JSON.stringify(data.query)), exportShow = true;
  query.page = 1
  query.size = 500
  if (data.total > 500) {
    ElMessageBox.confirm('玩家列表最多能导出查询数据最新的500条', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(async () => {
      exportShow = false
    }).catch(() => {
      exportShow = true
    })
  } else {
    exportShow = false
  }
  if (exportShow) return
  let res = await getPlayer(query);
  let dataList = res.data.list;

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'created_at_stamp':
          arr.push(setTimestampTime(item[x.prop]) as never)
          break
        case 'agent_id':
          arr.push(selectToLabel(indexStore.agentArray, item[x.prop]) as never)
          break
        case 'today_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'total_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'today_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'total_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'amount':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'is_online':
          arr.push(selectToLabel(ONLINESTATE, item[x.prop]) as never)
          break
        case 'last_login_stamp':
          arr.push(setTimestampTime(item[x.prop]) as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })

  exportToExcel(list, header, '玩家账号')
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isUserDetails = false
  data.isBanShow = false
  data.isBanListShow = false
  data.checkedItem = {
    account3d_id: 0,
    account3d: ''
  }
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      status: -1,
      search_type: 1,
      search_value: '',
      username: '',
      time_type: 2,
      ban_type: 0,
      agent_id: -1,
      operated_id: -1,
      is_online: -1,
      date: getSevenWeek()
    }
    OperatorRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
